<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>RefLine Demo</title>

  <style>
    #drag {
      position: relative;
      top: 50%;
      margin: 0 auto;
      border: 1px solid red;
      width: 700px;
      height: 700px;
    }
    .box {
      position: absolute;
      width: 50px;
      height: 50px;
    }
    .xt,.yl {
      background-color: red !important;
    }
    .xc,.yc {
      background-color: blue !important;
    }
    .xb,.yr {
      background-color: skyblue !important;
    }
  </style>
</head>

<body>

  <div id="drag">
    <div class="box" style="top:0; left:0;background: seagreen;"></div>
    <div class="box" style="top:70px; left:0;background: chartreuse;"></div>
    <div class="box" style="top:140px; left:0;background: saddlebrown;"></div>
    <div class="box" style="width:80px;top:210px; left:0;background: salmon;"></div>
    <div class="box" style="width:100px;top:280px; left:0;background: sandybrown;"></div>
    <div class="box" style="width:120px;top:350px; height: 20px; left:0;background: skyblue;"></div>
  </div>


  <script src="./drag.js"></script>
  <script src="./ref-line.js"></script>
  <script>
    window.onload = function () {
      let boxes = Array.from(document.querySelectorAll('.box'))
      let refLine = new RefLine(document.querySelector('#drag'))

      boxes.forEach((item) => {
        let drag = new Dragify(item)

        drag
          .on('move', () => {
            refLine.check(drag.$elem, '.box')
          })
          .on('end', () => {
            refLine.uncheck()
          })
      })
    }

  </script>
</body>

</html>